<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 20px auto;
			}

			.a {
				position: relative;
				top: 100px;
				left: 100px;
				width: 300px;
				height: 300px;
				background-color: yellow;
			}

			.b {
				width: 300px;
				height: 300px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h1>css定位 position 主要实现盒子自由的在盒子内移动位置，或者固定在屏幕中的某个位子，并且可以压住其他盒子</h1>
		<br>
		<h2>定位是三大布局方式的一种，实际也是摆放盒子</h2>
		<h1>定位=定位模式+边偏移</h1>
		定位模式：
		<ol>
			<li>static 静态定位：默认定位方式，即无定位</li>
			<br>
			<li>relative 相对定位：
				<ul>
					<li>元素在移动位置时是相对它原来的位置来说，即自恋型</li>
					<li>相对定位的盒子移动后原位置继续占有，不脱标</li>
					<li>相对定位的典型应用是给绝对定位当爹，即子绝父相</li>
				</ul>
			</li>
			<br>
			<li>absolute 绝对定位:
				<ul>
					<li>元素在移动位置时相对于祖先元素来说，即拼爹型</li>
					<li>如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）</li>
					<li>如果祖先元素有定位，不管是什么定位，则会以最近一级有定位的祖先元素为参考点移动位置</li>
					<li>绝对定位不会占有原来的位子，脱标</li>
				</ul>
			</li>
			<br>
			<li>fixed 固定定位：
				<ol>
					<li>以浏览器可视窗口为参照点移动元素
						<ul>
							<li>跟父元素没有关系</li>
							<li>不随着滚动条滚动</li>
						</ul>
					</li>
					<li>固定定位不占有原来的位置，可以视为一种特殊的绝对定位</li>
				</ol>
			</li>
			
			<h1>固定定位始终贴在版心右边的做法：首先让固定定位的盒子走屏幕的一半，再用margin-left走版心盒子宽度的一半即可</h1>
		</ol>
		<br>
		<br>
		边偏移：top、bottom、left、right四个属性，分别相当于父元素上下左右四边的偏移距离
		<h3>边偏移的四个属性专属于定位使用，标准流和浮动不能使用</h3>



		<br>
		<br>

		<h3>理解子绝父相的由来，为什么必须是子绝父相：
			<ul>
				<li>1.子级绝对定位不会占有位子，可以放到父盒子的任意一个位子，不会影响兄弟盒子</li>
				<li>2.父盒子需要加定位限制子盒子在父盒子内显示</li>
				<li>3.父盒子布局时需要占有位子，因为如果不占有位子则后面的标准流会升起来，布局会乱，因此父盒子只能用相对定位</li>
				<li>4.子绝父相不是绝对的，实际开发中也会遇到子绝父绝等情况，要根据实际情况而定</li>
			</ul>
		</h3>
		
		<br>
		<br>
		<h3>粘性定位：1.以浏览器可视窗口为参照点移动元素 2.粘性定位占有原来的位子 3.必须添加top left bottom right 中的一个属性才可以。一般设置top在距离浏览顶部一段距离时跟着滚动条移动。 兼容性差，基本不使用，了解即可，一般实现这种效果使用js</h3>
		<br>
		<br>
		<h1>定位的叠放顺序可以用z-index来控制,数值越大盒子越靠上；如果数值一样则按照书写顺序后来居上；数值后面不能加单位；只有定位的盒子才有z-index属性</h1>
		<br>
		<h1>相对定位的演示：</h1>
		<div class="a"></div>
		<div class="b"></div>
	</body>
</html>
